<template>
  <div class="main">
    <div class="headcard" style="height: 100vh">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("Recharge") }}</div>
      </div>
      <div class="user-info-box">
        <div class="info-icon">
          <van-icon :name="big_icon" />
        </div>
        <div class="info-money-box">
          <div class="user-diamond">
            <van-icon :name="small_icon" />
            {{ userMoney }}
          </div>
          <div class="user-diamond">{{ currency_symbol }} {{ needMoney }}</div>
        </div>
      </div>
      <div class="pay-way-box">
        <div class="title">{{ $t("PaymentMethod") }}</div>
        <div
          class="pay-way"
          v-for="(item, index) in channel"
          :key="index"
          @click="payWay = item.pay_channel"
        >
          <div
            class="pay-way-top"
            :class="payWay === item.pay_channel ? 'active' : ''"
          >
            <div>
              {{ item.title }}
            </div>
            <div v-if="payWay === item.pay_channel">
              <van-icon name="success" />
            </div>
          </div>
          <div
            class="pay-way-bottom"
            v-if="payWay === item.pay_channel && payWay == 'MasterCard'"
          >
            <div class="cardNumber-box">
              <div class="label">
                <span>{{ $t("cardNumber") }}</span>
              </div>
              <van-field
                class="customField"
                :placeholder="$t('cardNumberTips')"
                v-model="form.card_number"
                type="number"
              />
            </div>
            <div class="safeCode">
              <div class="codeDiv">
                <div class="label">
                  <span>{{ $t("validity") }}</span>
                </div>
                <van-field
                  class="customField"
                  v-model="form.card_date"
                  :placeholder="$t('yearMonth')"
                  right-icon="arrow-down"
                  @click-right-icon="isShowDate = true"
                />
              </div>
              <div class="codeDiv">
                <div class="label">
                  <span>{{ $t("safeCode") }}</span>
                </div>
                <van-field
                  class="customField"
                  :placeholder="$t('safeCodeTips')"
                  v-model="form.card_security_code"
                  type="number"
                  @input="safeCodeValueChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="btn" @click="goShop">{{ $t("Recharge") }}</div>
    </div>
    <van-popup v-model="isShowDate" position="bottom">
      <van-datetime-picker
        v-model="form.validity"
        type="year-month"
        @confirm="onConfirm"
        @cancel="isShowDate = false"
        :confirm-button-text="$t('OK')"
        :cancel-button-text="$t('cancel')"
      />
    </van-popup>
  </div>
</template>
<script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js"
></script>
<script>
import { httpPlaceOrder, httpGetChannel } from "@/http/api";

export default {
  name: "orderWay",
  data() {
    return {
      userMoney: 0,
      needMoney: 0,
      payWay: "",
      currency_symbol: "",
      big_icon: "",
      small_icon: "",
      channel: [],
      form: {
        card_number: "",
        card_security_code: "",
        card_month: "",
        card_year: "",
        card_date: "",
        validity: "",
      },
      isShowDate: false,
    };
  },
  created() {
    this.getInfo();
    this.getHttpGetChannel();
  },
  methods: {
    safeCodeValueChange(val) {
      if (val.length > 3) {
        this.form.card_security_code = val.slice(0, 3);
      }
    },
    onConfirm(value) {
      let date = new Date(value);
      this.form.card_year = date.getFullYear(value);
      this.form.card_month = date.getMonth(value) + 1;
      this.form.validity = this.form.card_month + " / " + this.form.card_year;
      this.form.card_date = this.form.card_month + " / " + this.form.card_year;
      this.isShowDate = false;
    },
    async getInfo() {
      const { price, amount, currency_symbol, big_icon, small_icon } =
        JSON.parse(this.$route.query.item);

      this.needMoney = price;
      this.userMoney = amount;
      this.currency_symbol = currency_symbol;
      this.big_icon = big_icon;
      this.small_icon = small_icon;
    },
    // 获取支付通道
    async getHttpGetChannel() {
      let res = await httpGetChannel();
      if (res.code == 0) {
        this.channel = res.data || [];
        if (this.channel.length > 0) {
          this.payWay = this.channel[0].pay_channel;
        }
      }
    },
    async goShop() {
      const { goods_id } = JSON.parse(this.$route.query.item);
      if (this.payWay == "MasterCard") {
        if (this.form.card_number.length < 12) {
          this.$toast(this.$t("cardNumberErrorTips"));
          return;
        }
        if (!this.form.validity) {
          this.$toast(this.$t("yearMonthErrorTips"));
          return;
        }
        if (this.form.card_security_code.length < 3) {
          this.$toast(this.$t("safeCodeErrorTips"));
          return;
        }
        const query = {
          card_month: this.form.card_month,
          card_year: this.form.card_year,
          card_security_code: this.form.card_security_code,
          card_number: this.form.card_number,
          goods_id,
          pay_channel: this.payWay,
        };
        const res = await httpPlaceOrder(query);
        if (res.code === 0) {
          this.$toast(this.$t("rechargeSuccess"));
          if (res.data.jump_url) {
            window.location.href = res.data.jump_url;
          }
          fbq("track", "AddPaymentInfo"); //加入购物车
        } else {
          this.$toast(this.$t("rechargeError"));
        }
      } else {
        const res = await httpPlaceOrder({
          goods_id,
          pay_channel: this.payWay,
        });
        if (res.code === 0) {
          if (this.payWay.includes("USDT")) {
            this.$router.push({
              path: "/orderPay",
              query: {
                item: JSON.stringify(res.data),
              },
            });
            fbq("track", "AddPaymentInfo"); //加入购物车
          } else {
            window.location.href = res.data.jump_url;
          }
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./acc.less");
* {
  // font-weight: 750;
  color: #93653e;
}
.pay-way-box {
  margin: 30px;
  .title {
    display: inline-block;
    font-size: 30px;
    height: 60px;
    // color: #9a9a9c;
    color: white;
    flex-shrink: 0;
    font-weight: 800;
  }
  .pay-way {
    // background: #ced4f8;
    background: #f9f3dd;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    margin-bottom: 20px;
    border-radius: 15px;
    .active {
      border: 1px solid #93653e;
      border-radius: 15px;
    }
    .pay-way-top {
      display: flex;
      justify-content: space-between;
      padding: 30px;
      border-radius: 15px;
    }
    .pay-way-bottom {
      background: #f9f3dd;
      // display: flex;
      // flex-direction: column;
      padding: 30px;
      border-radius: 15px;
      .cardNumber-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .label {
          margin-bottom: 15px;
        }
        .customField {
          border-radius: 10px;
          height: 80px;
          display: flex;
          justify-content: start;
          align-items: center;
          border: 1px solid #93653e;
        }
      }
      .safeCode {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        .codeDiv {
          width: 48%;
          &:first {
            margin-right: 20px;
          }
          .label {
            margin-bottom: 15px;
          }
        }
        .customField {
          border-radius: 10px;
          height: 80px;
          display: flex;
          justify-content: start;
          align-items: center;
          border: 1px solid #93653e;
        }
      }
    }
  }
}
.user-info-box {
  display: flex;
  // background: #ced4f8;
  background: #f9f3dd;
  height: 150px;
  margin: 30px;
  border-radius: 15px;
  align-items: center;
  .info-icon {
    width: 16%;
    text-align: center;
    font-size: 60px;
    // background: #aab6e8;
    background: #e5c184;
    margin: 10px;
    padding: 25px;
    box-sizing: border-box;
    color: white;
    border-radius: 15px;
  }
  .info-money-box {
    width: 80%;
    .user-diamond {
      // background: #aab6e8;
      background: #e5c184;
      margin: 10px 0px 10px 0px;
      padding: 8px;
      color: white;
      box-sizing: border-box;
      border-radius: 15px;
    }
  }
}
.btn {
  margin: 0 auto;
  margin-top: 50px;
  width: 682px;
  height: 116px;
  /**background: linear-gradient(
    178.44deg,
    rgba(238, 220, 201, 1) 0%,
    rgba(220, 188, 155, 1) 100%
  );
  box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
  background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  // transition: all 0.05s;
  user-select: none;
}
</style>
